<template>
  <div class="home">
    <el-container>
      <el-aside :width="auto">
        <!-- 系统logo -->
        <div class="logoheader">
          <el-image style="width: 40px; height: 40px; margin-left: 20px" :src="logo" :fit="'fill'" />
          <span v-if="!isCollapse">精邦后台</span>
        </div>
        <!-- 侧边栏组件 -->
        <AsideCom :isCollapse="isCollapse"></AsideCom>
      </el-aside>
      <el-container>
        <el-header>
          <!-- 头部信息 -->
          <el-icon :size="30" @click="isCollapse = !isCollapse">
            <!-- <Fold /> -->
            <template v-if="isCollapse">
              <Expand />
            </template>
            <template v-else>
              <Fold />
            </template>
            <!-- {{isCollapse? <Expand /> :<Fold />}} -->
          </el-icon>
          <!-- <el-icon :size="30"><Expand /></el-icon> -->
          <!-- 右侧展示当前的用户信息 -->
          <component :is="comName"> </component>
          <el-space>
            <span> 欢迎您: {{ username }} </span>
            <div class="block">
              <el-dropdown>
                <el-avatar shape="square" :size="40" :src="squareUrl" />
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>设置</el-dropdown-item>
                    <el-dropdown-item @click="loginOut">退出</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </el-space>
        </el-header>
        <el-main>
          <!-- 首页 -->
          <!-- 添加面包屑导航 -->
          <breadcrumb></breadcrumb>
          <!-- 二级路由的坑 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
// 引入图标组件
import { Fold, Expand } from "@element-plus/icons-vue";
import { mapState, mapMutations } from "vuex";
import AsideCom from "@/components/AsideCom.vue";
//导入面包屑导航
import breadcrumbVue from "@/components/breadcrumb.vue";

export default {
  data() {
    return {
      // fit: "",
      squareUrl:
        "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      logo: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      isCollapse: false, //是否折叠左侧菜单栏 true 表示折叠
    };
  },
  components: {
    Fold,
    AsideCom,
    Expand,
    breadcrumbVue,
  },
  computed: {
    ...mapState(["username"]),
    comName() {
      // return this.isCollapse ? Expand : Fold;
    },
    auto() {
      return this.isCollapse ? "63px" : "200px";
    },
  },
  methods: {
    ...mapMutations(["updateUsername", "updataRole", "updateCheckedkeys"]),
    // 退出登录功能
    loginOut() {
      // 注意: 退出登录一般没有接口调用,只需要清除登录时存的信息即可,并且跳回到登录页
      // 01:
      this.updateUsername("");
      this.updataRole("");
      this.updateCheckedkeys("");
      localStorage.removeItem("token");
      //02: 回到登录页
      this.$router.push("/login");
    },
  },
};
</script>
<style lang="scss" scope>
.home,
.el-container {
  width: 100%;
  height: 100%;

  .el-aside {
    background-color: grey;
    transition: 0.5s;

    .logoheader {
      display: flex;
      align-items: center;

      // display: block;
      // vertical-align: middle;
      span {
        margin-left: 5px;
      }
    }
  }

  .el-header {
    background-color: gainsboro;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .el-main {
    background-color: goldenrod;
  }
}
</style>